<template>
    <div class="order-list">
      <el-button type="primary" @click="refresh" :loading="loading">刷新列表</el-button>
      
      <el-table :data="evaluations" style="width: 100%" border>
        <el-table-column prop="nickname" label="昵称" width="180"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="220"></el-table-column>
        <el-table-column prop="orderId" label="订单号"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-dialog title="评价详情" :visible.sync="dialogVisible" width="50%">
        <div v-if="currentEvaluation">
          <p><strong>昵称:</strong> {{ currentEvaluation.nickname }}</p>
          <p><strong>邮箱:</strong> {{ currentEvaluation.email }}</p>
          <p><strong>订单号:</strong> {{ currentEvaluation.orderId }}</p>
          <p><strong>评分:</strong> 
            <el-rate v-model="currentEvaluation.rating" disabled show-text :texts="['差', '较差', '一般', '好', '很好']"></el-rate>
          </p>
          <p><strong>评价内容:</strong></p>
          <el-input type="textarea" :rows="4" v-model="currentEvaluation.comment" readonly></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      evaluations: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        loading: false,
        dialogVisible: false,
        currentEvaluation: null
      }
    },
    methods: {
      refresh() {
        this.$emit('refresh')
      },
      handleView(row) {
        this.currentEvaluation = row
        this.dialogVisible = true
      }
    }
  }
  </script>
  
  <style scoped>
  .order-list {
    padding: 20px;
  }
  </style>